@page "/account/registration"
@inherits ReactiveInjectableComponentBase<RegistrationViewModel>

<PageTitle>Account Registration</PageTitle>
<Container>
    <Heading Size="HeadingSize.Is1" Padding="Padding.Is4.FromTop">Register</Heading>
    <Paragraph Padding="Padding.Is1.FromTop">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus ex non sapien porta, at efficitur massa condimentum. Nam id nibh facilisis, blandit nulla et, tempus nisl.</Paragraph>
</Container>

<Container Fluid Padding="Padding.Is4.FromTop">
    <Validations Mode="ValidationMode.Auto" Model="ViewModel">
        <Fields>
            <Validation HandlerType="HandlerTypes.FluentValidation">
                <Field Horizontal ColumnSize="ColumnSize.Is12">
                    <FieldLabel ColumnSize="ColumnSize.Is2.OnDesktop">Email Address</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">
                        <TextEdit Placeholder="Some text value..." @bind-Text=ViewModel.EmailAddress>
                            <Feedback>
                                <ValidationError/>
                            </Feedback>
                        </TextEdit>
                    </FieldBody>
                </Field>
            </Validation>
            <Validation HandlerType="HandlerTypes.FluentValidation">
            <Field Horizontal ColumnSize="ColumnSize.Is12">
                <FieldLabel ColumnSize="ColumnSize.Is2.OnDesktop">Password</FieldLabel>
                <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">
                    <TextEdit Role="TextRole.Password" Placeholder="Some text value..." @bind-Text=ViewModel.Password>
                        <Feedback>
                            <ValidationError/>
                        </Feedback>
                    </TextEdit>
                </FieldBody>
            </Field>
            </Validation>
        </Fields>
    </Validations>
    <Button Color="Color.Primary" Command="ViewModel.Register" Disabled="@(!ViewModel.CanRegister)">Register</Button>
</Container>  